<style>
    #theme .enable {
        border-bottom: 1px solid #DDD;
        padding: 15px 0;
        zoom: 1;
        overflow: hidden;
    }

    #theme dl p img {
        width: 280px;
        height: 175px;
    }

    #theme .enable h2 {
        font-size: 14px;
        font-weight: bold;
        color: #999;
        margin-bottom: 10px;
    }

    #theme .enable p {
        float: left;
        margin-top: 5px;
        padding: 4px;
        background-color: #FFF;
        border: 1px solid #DDD;
    }

    #theme .enable dl {
        float: left;
        padding: 10px;
    }

    #theme .enable dl dt {
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 10px;
    }

    #theme .enable dl dd {
        margin-bottom: 5px;
    }


    /* -- themeList -- */

    #theme .themeList {
        padding-top: 30px;
        zoom: 1;
        overflow: hidden;
    }

    #theme .themeList h2 {
        font-size: 14px;
        font-weight: bold;
        color: #60BBFF;
        margin-bottom: 15px;
    }

    #theme .themeList dl {
        border: 1px solid #DDD;
        width: 288px;
        background-color: #FAFAFA;
        float: left;
        margin: 0 20px 20px 0;
        padding-bottom: 5px;
    }

    #theme .themeList dl p {
        padding: 4px 4px 10px 4px;
        background-color: #FFF;
        border-bottom: 1px solid #EEE;
    }

    #theme .themeList dl p img {
        width: 280px;
        height: 175px;
    }

    #theme .themeList dl.mobile {
        width: 178px;
        margin-right: 40px;
    }

    #theme .themeList dl.mobile p img {
        width: 170px;
        height: 230px;
    }

    #theme .themeList dl dt {
        font-weight: bold;
        padding: 5px;
    }

    #theme .themeList dl dd {
        padding: 2px 5px;
    }

    #theme .themeList dl dd.btnList span a {
        color: #0072C6;
        margin-right: 10px;
    }

    #theme .themeList dl dd.btnList span em {
        margin-right: 10px;
    }

    #theme .themeList dl dd.btnList .del {
        float: right;
        color: #999;
    }
</style>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-tab layui-tab-brief" lay-filter="current">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="1">本地模板</li>
                <li><a href="{:url('addon.template/online')}">在线模板</a></li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div id="theme" style="padding:0 20px">
                        <div class="enable">
                            <h2>当前启用的模板</h2>
                            {volist name="use" id="vo"}
                            {if is_array($vo)}
                            <dl>
                                <p> <a target="_blank" href="{$vo.url}"><img src="{$vo.screenshot}" title="点击查看详情"></a></p>
                                <dt>{$vo.title} </dt>
                                <dd>版本：{$vo.version}</dd>
                                <dd>作者：{$vo.author}</dd>
                                <dd>简介：{$vo.description}</dd>
                             </dl>
                            {/if}
                            {/volist}
                        </div>
                        <div class="themeList">
                            <h2>可用模板</h2>
                            {volist name="not_use" id="v"}
                                <div class="layui-clear">
                                    {volist name="v" id="vo"}
                                <dl>
                                    <p> <a target="_blank" href="{$vo.url}"><img src="{$vo.screenshot}" title="点击查看详情"></a></p>
                                    <dt>{$vo.title}</dt>
                                    <dd>版本：{$vo.version}</dd>
                                    <dd>作者：{$vo.author}</dd>
                                    <dd>简介：{$vo.description}</dd>
                                    <dd class="btnList"><a href="javascript:;" data-controller="{$vo.controller}" data-name="{$vo.name}" data-action="delete"  class="action del">删除</a>
                                        <span><a href="javascript:;" data-controller="{$vo.controller}" data-name="{$vo.name}"  data-action="setUse" class='action'>启用</a>
                                            <a target="_blank" href="{$vo.demo_url}">演示地址</a></span></dd>
                                </dl>
                                    {/volist}
                                </div>
                            {/volist}
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
